<template>
  <div class="module_container">
    <div class="module_title">
      <div class="title_text">服务亲清</div>
    </div>
    <!-- <dv-loading v-if="loading">Loading...</dv-loading> -->
    <div v-loading="loading" class="content" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)">
      <div class="sub_title">亲清在线月度兑付服务金额</div>
      <div ref="bar" class="bar" />
      <div class="sub_title" style="margin-top: 40px">亲清政策列表</div>
      <div class="ranking_box">
        <div v-for="(item, index) in policyList" :key="item.id" class="ranking" flex>
          <div class="margin_right_10" :class="index === 1 ? 'active' : ''">
            {{ index + 1 }}
          </div>
          <div class="text_over" :class="index === 1 ? 'active' : ''" @click="handleItemClick(item)">
            {{ item.policyName }}
          </div>
        </div>
        <!-- <div class="modal">
          <div>aaaa</div>
        </div> -->
      </div>

      <div class="sub_title" style="margin-top: 40px">各类型行政许可情况</div>

      <div class="legend_box_layout">
        <i class="left" flex="cross:center main:center" @click="handleLeft(true)"> <img
            src="@/assets/img_qingqin/modal/right.png" alt="" srcset=""> </i>
        <i class="right" flex="cross:center main:center" @click="handleLeft(false)"> <img
            src="@/assets/img_qingqin/modal/right.png" alt="" srcset=""> </i>
        <div ref="scroll_layout" class="scroll_layout">
          <div class="legend_box">
            <div v-for="(item, index) in licenseList1" :key="index" flex="main:justify cross:center">
              <div class="text_over" style="width:190px">{{ item.xkwjmc }}</div>
              <b class="flex_1" style="color: #00f7ff; font-size: 36px;width:190px">{{ item.num }}</b>
            </div>
          </div>
          <div class="legend_box">
            <div v-for="(item, index) in licenseList2" :key="index" flex="main:justify cross:center">
              <div class=" text_over" style="width:190px">{{ item.xkwjmc }}</div>
              <b class="text_over" style="color: #00f7ff; font-size: 36px;width:190px">{{ item.num }}</b>
            </div>
          </div>
        </div>

      </div>

      <div class="sub_title">行政服务窗口</div>
      <div flex="cross:center">
        <div class="l_circle" flex="cross:center main:center">
          <dv-active-ring-chart :config="config" style="width: 300px; height: 300px" />
          <p class="text">行业认证</p>
        </div>
        <ul class="flex_1 list_box">
          <li v-for="item in categoryOptions" :key="item.id" flex="main:justify">
            <span class="flex_1">{{ item.category }}</span>
            <span style="width: 150px">{{ item.num }}</span>
            <span style="width: 80px">{{ transPercent(item.percent) }}</span>
          </li>
        </ul>
        <!-- <img src="@/assets/img_xinyong/module2/data_circle_bg.png" alt="" srcset=""> -->
      </div>
    </div>
    <Modal v-model="showModal" :title="modalTitle">
      <div class="table_detail">
        <!-- <div>返回</div> -->
        <div class="detail_content" style="line-height: 36px">
          <div flex style="color: #617b8f">
            <div class="flex_1">
              部门名称：<span>{{ tableData.deptName || '--'
              }}{{ tableData.scjgj_qyjbxx_zczjdw }}万</span>
            </div>
          </div>
          <div flex>
            <div class="flex_1">
              描述：<span>{{
                (tableData.policyDesc || []).slice(0, 11)
              }}</span>
            </div>
          </div>
          <div flex>
            <div class="flex_1">
              标题名称：<span>{{
                tableData.policyName || '--'
              }}</span>
            </div>

          </div>
          <div flex>
            <div class="flex_1">
              时间：<span>{{ tableData.validDate }}</span>
            </div>
          </div>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import Modal from '@/components/Modal/index'
import { optionLine } from './module2_option.js'
// import Charts from '@jiaminghi/charts'
import Highcharts from '@/config/highCharts'
import { categoryPercent, policyList, policyCashByMonth, adminLicenseCategorh } from '@/api/home'
export default {
  components: { Modal },
  data() {
    return {
      config: {
        data: [],
        lineWidth: 10
      },
      categoryOptions: [{category:"aaa",num:1}],
      policyList: [],
      licenseList: [],
      policyCashByMonthList: [],
      loading: true,
      showModal: false,
      modalTitle: '',
      tableData: {}

    }
  },
  computed: {
    licenseList1() {
      if (!this.licenseList.length) return []
      const length = Math.ceil(this.licenseList.length / 2)
      return this.licenseList.slice(0, length)
    },
    licenseList2() {
      if (!this.licenseList.length) return []
      const length = Math.ceil(this.licenseList.length / 2)
      return this.licenseList.slice(length)
    }
  },
  created() {
    // Promise.all([categoryPercent(), policyList(), policyCashByMonth(), adminLicenseCategorh()])
    //   .then(res => {
    //     const [categoryOptions, policyList, lineData, LicenseList] = res
    //     this.categoryOptions = categoryOptions.data
    //     this.policyList = policyList.data
    //     this.licenseList = LicenseList.data
    //     optionLine.xAxis[0].categories = lineData.data.sort((a, b) => {
    //       return a.month - b.month
    //     }).map(item => item.month + '月')
    //     optionLine.series[0].data = lineData.data.map(item => item.amount)
    //     this.config = {
    //       data: categoryOptions.data.map(item => ({
    //         name: item.category,
    //         value: item.num
    //       })),
    //       lineWidth: 10
    //     }
    //     this.$nextTick(() => {
    //       // new Charts(this.$refs.bar).setOption(optionLine)
    //       Highcharts.chart(this.$refs.bar, optionLine)
    //       this.loading = false
    //     })
    //   })
    //   .finally(() => {
    //     this.loading = false
    //   })
    this.$nextTick(() => {
      // new Charts(this.$refs.bar).setOption(optionLine)
      Highcharts.chart(this.$refs.bar, optionLine)
      this.loading = false
    })
  },
  methods: {
    transPercent(percent) {
      const num = percent * 100
      return num.toFixed(2) + '%'
    },

    handleItemClick(item) {
      this.showModal = true
      this.modalTitle = item.policyName
      this.tableData = item
    },
    handleLeft(isleft) {
      let px = isleft ? -830 : 830
      const val = this.$refs.scroll_layout.style.transform
      if (val) {
        const arr = val.split('translateX(')
        px += parseInt(arr[1])
      }
      if (Math.abs(px) > this.licenseList1.length * 380 || px === 830) return
      this.$refs.scroll_layout.style.transform = `translateX(${px}px)`
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  // margin-top: 20px;
  // position: relative;
  padding: 25px 40px 38px 40px;
  font-size: 28px;
  position: relative;

  ::v-deep .detail_content {
    line-height: 64px;
    color: #617b8f;

    &>div {
      margin-top: 20px;
    }

    span {
      color: #bfe3ff;
    }
  }

  .sub_title {
    margin-top: 20px;
    margin-bottom: 20px;
    background: url('~@/assets/img_xinyong/module6/sub_title_bg.png') no-repeat;
    width: 410px;
    height: 58px;
    line-height: 58px;
    // padding:20px;
    padding-left: 70px;
    font-size: 28px;
  }

  &>.bar {
    width: 100%;
    height: 240px;
    margin-bottom: 15px;
  }

  .legend_box_layout {
    width: 100%;
    overflow-x: hidden;
    position: relative;

    .scroll_layout {
      transition: all .5s linear;
    }

    &:hover {
      .left {
        opacity: 1;
        right: 0;
      }

      .right {
        opacity: 1;
        left: 0;
      }
    }

    .left,
    .right {
      background-size: 100% 100%;
      width: 80px;
      height: 80px;
      position: absolute;
      right: -20px;
      top: 50%;
      transform: translateY(-65%);
      cursor: pointer;
      z-index: 10;
      border-radius: 50%;
      background: rgba($color: #000000, $alpha: 0.2);
      text-align: center;
      opacity: 0;
      transition: all .5s linear;

      &:hover {
        background: rgba($color: #000000, $alpha: 0.6);
      }
    }

    .right {
      left: -20px;
      transform: translateY(-65%) rotateY(180deg);
    }
  }

  .legend_box {
    display: flex;
    // flex-wrap: wrap;
    // justify-content: space-between;
    position: relative;
    flex: 1;

    // width: 1800px;
    &>* {
      margin-right: 20px;
      // width: 500px;
      line-height: 64px;
      color: #bfdaff;
      background: url('~@/assets/img_qingqin/module2/card_bg.png') no-repeat;
      background-size: 100% 100%;
      text-align: center;
      padding: 0 10px;
      box-sizing: border-box;
      margin-bottom: 24px;
    }
  }

  .ranking_box {
    height: 220px;
    overflow-y: auto;

    // .modal{
    //   position: absolute;
    //   top: 200px;
    //   left: 100%;
    //   width: 50%;
    //   height: 300px;
    //   z-index: 11;
    //   background: rgba(0, 102, 255, 0.658);
    // }
    .ranking {
      margin-bottom: 10px;
      color: #c0e6ff;

      &>*:first-child {
        width: 64px;
        height: 64px;
        text-align: center;
        line-height: 64px;
        background: url('~@/assets/img_qingqin/module2/rank_mark_normal_bg.png') no-repeat;
        background-size: 100% 100%;

        &.active,
        &:hover {
          background: url('~@/assets/img_qingqin/module2/rank_mark_active_bg.png') no-repeat;
          background-size: 100% 100%;
        }
      }

      &>*:last-child {
        background: url('~@/assets/img_qingqin/module2/rank_data_bg.png') no-repeat;
        background-size: 100% 100%;
        width: 1020px;
        height: 64px;
        line-height: 64px;
        padding-left: 30px;
        cursor: pointer;

        &.active,
        &:hover {
          background: url('~@/assets/img_qingqin/module2/rank_data_bg_active.png') no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }

  .l_circle {
    background: url('~@/assets/img_xinyong/module2/data_circle_bg.png') no-repeat;
    background-size: cover;
    height: 280px;
    width: 280px;
    position: relative;

    .text {
      position: absolute;
      bottom: -50px;
      text-align: center;
      width: 100%;
    }

    // padding-bottom: 20px;
  }

  .list_box {
    color: #bfdaff;

    &>*:not(:first-child) {
      margin-top: 23px;
    }
  }
}
</style>
